<template>
    <div>
        <div id="slider" class="mui-slider">
				<div id="sliderSegmentedControl" class="mui-scroll-wrapper mui-slider-indicator mui-segmented-control mui-segmented-control-inverted">
					<div class="mui-scroll">
						<a :class="['mui-control-item',item.id==0 ? 'mui-active' : '']" v-for="item in cates" :key='item.id' @tap='getPhotoListByCateId(item.id)'>
							{{ item.title }}
						</a>
					</div>
				</div>
            </div> 
		<ul class='photo-list'>
			<router-link v-for='item in list' :key='item.id' tag="li" :to="'/home/photoinfo/'+item.id">
				<img v-lazy='item.img_url'>
				<div class="info">
					<h1 class="info-title">
						{{ item.title }}
					</h1>
					<div class="info-abstract">
						{{ item.abstract }}
					</div>
				</div>
			</router-link>
		</ul>
	
	</div>

</template>

<script>
//导航栏需要用到滚动效果，所以需要导入js文件，由于此文件中使用到了严格模式中禁用的方法，
// 所以若是想要继续使用，则需要将webpack中的严格模式关闭
import mui from '../../lib/mui/js/mui.min.js'
import { isRegExp } from 'util';
//此处设置滑到效果




export default {
	data() {
		return {
			cates:[
				// { title:'全部',id:0 },
				// { title:'动漫专区',id:1 },
				// { title:'风景专区',id:2 },
				// { title:'体育专区',id:3 },
				// { title:'限时抢购',id:4 },
				// { title:'天猫榜单',id:5 }
			],
			list:[
				// {
				// 	id:50,
				// 	title:'火影忍者',
				// 	img_url:'http://img.netbian.com/file/2019/0515/370736fb935c90dc3193cd8dd6fc25da.jpg',
				// 	abstract:'火影忍者之傅人传 是火影忍者的后续'
				// },
				// {
				// 	id:51,
				// 	title:'海贼王',
				// 	img_url:'https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1559804318060&di=ee21b626f6299489c8f2e19d48e0e0e9&imgtype=0&src=http%3A%2F%2Fp18.qhimg.com%2Fbdr%2F__%2Fd%2F_open360%2Fguoqing1007%2F13.jpg',
				// 	abstract:'海贼王更新至今十多年，如今还未完结'
				// },
				// {
				// 	id:52,
				// 	title:'NBA',
				// 	img_url:'https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1560399101&di=1cf264125c1a4a86708ed23c80357b0f&imgtype=jpg&er=1&src=http%3A%2F%2Fphotocdn.sohu.com%2F20150513%2FImg412947265.jpg',
				// 	abstract:'金州勇士队斯蒂芬库里'
				// },
				// {
				// 	id:53,
				// 	title:'欧冠',
				// 	img_url:'https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1560399204&di=7b6b8de363f418a55218041f1146dc75&imgtype=jpg&er=1&src=http%3A%2F%2Fpic1.win4000.com%2Fwallpaper%2F6%2F585a1439c11d4.jpg',
				// 	abstract:'每年的欧冠都会吸引大量的观众熬夜观看'
				// },
				// {
				// 	id:54,
				// 	title:'三亚',
				// 	img_url:'https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1559804588583&di=8bcc1e126dc7adbdf0bee16ae8648046&imgtype=0&src=http%3A%2F%2Fnews.hainan.net%2FEditor%2Fimg%2F201707%2F20170718%2Fbig%2F20170718090305956_6039970.jpg',
				// 	abstract:'三亚实在太美了'
				// },
				// {
				// 	id:55,
				// 	title:'青海',
				// 	img_url:'https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1559804643962&di=5cc9dfe2f9794e54b4bdf737eafe4309&imgtype=0&src=http%3A%2F%2Fimg.pconline.com.cn%2Fimages%2Fupload%2Fupc%2Ftx%2Fphotoblog%2F1211%2F27%2Fc1%2F16119247_16119247_1353969075747.jpg',
				// 	abstract:'夏季的青海依然很冷'
				// }
			]
		};
	},
	created(){
		this.getAllcategory();
		this.getPhotoListByCateId(0);//默认进入页面就请求所有图片
	},
	methods: {
		getAllcategory(){
			this.$http.get('https://www.easy-mock.com/mock/5cf86de19b40a0058b942993/vue-001/getAllcategory').then(result =>{
				if(result.status === 200) {
					this.cates = result.body.data;
				}
			})
		},
		getPhotoListByCateId(cateId){
			this.$http.get('https://www.easy-mock.com/mock/5cf86de19b40a0058b942993/vue-001/photolist/'+ cateId).then(result =>{
				if(result.status === 200){
					this.list = result.body.data;
				}
			})
		}
	},
	mounted() {
		//初始化组件的滑到功能，需要放到mounted里面进行
		mui('.mui-scroll-wrapper').scroll({
			deceleration:0.0005
		});
	}
    
}
</script>

<style lang="scss" scoped>
*{
	//启用单指垂直平移手势。可以与 pan-x 、pan-left 、pan-right 和／或 pinch-zoom 组合使用。
    touch-action:pan-y;//这样任何触摸事件都不会产生默认行为，但是 touch 事件照样触发，这样浏览器才不会一直报错
}

.photo-list{	
	list-style: none;
	padding:10px;
	margin: 0;
	
	li{
		height: 200px;
		position: relative;
		// padding: 0 10px;
		background-color: #ccc;
		text-align: center;
		margin-bottom:10px;
		box-shadow: 0 0 6px #666;

		img{
			height: 100%;
			width: 100%;
			vertical-align:middle;
		}

		img[lazy='loading']{
			width:40px;
			height:300px;
			margin:auto;
		}

		.info {
			text-align: left;
			position: absolute;
			bottom: 0;
			color:white;
			background-color: rgba(0,0,0,0.4);
			width:100%;
			.info-title{
				font-size : 13px;
			}

			.info-abstract{
				font-size : 10px;
			}
		}



	}
}



</style>

